<template>
  <div class="AddOrUpdate_main column_two add_container">
    <div class="main_main">
      <el-form ref="form" :model="formData" :rules="rules" :inline="true">
        <div class="main_main_title">
          <el-form-item label="公告类型:" prop="announcementTypeCode">
            <DictSelect
              :band-value.sync="formData.announcementTypeCode"
              dict-type="announcementType"
            />
          </el-form-item>
          <el-form-item label="公告发布时间:" prop="noticeTime" class="double">
            <el-date-picker
              v-model="formData.noticeTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm"
              format="yyyy-MM-dd HH:mm"
              placeholder="请选择"
              :editable="false"
            />
          </el-form-item>
          <el-form-item label="公告截止时间:" prop="endTime" class="double">
            <el-date-picker
              v-model="formData.endTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm"
              format="yyyy-MM-dd HH:mm"
              placeholder="请选择"
              :editable="false"
            />
          </el-form-item>
        </div>
        <el-form-item class="noticeTitle" label="公告主题:" prop="noticeTitle">
          <el-input v-model="formData.noticeTitle" placeholder="请输入" clearable />
        </el-form-item>
        <div class="main_noticeContent">
          <span class="notice_main">公告正文:</span>
          <rich-text
            ref="wangEditorRef"
            :disabled="editorParams.isDisabled"
            :editor-params="editorParams"
          ><rich-text />
          </rich-text>
        </div>
      </el-form>
    </div>
    <div>
      <div class="main_main_bottom">
        <div class="main_bottom_one">
          <el-button class="draft" @click.stop="onSubmit">存草稿</el-button>
        </div>
        <div class="main_bottom_two">
          <el-button type="cancel" @click.stop="cancel">取消</el-button>
          <el-button @click.stop="releaseNotice">发布</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { addOrUpdate, getInfo } from '@/api/system/notice'
import moment from 'moment'
export default {
  name: 'AddOrUpdate',
  props: {
    layerid: {},
    id: {},
    defaultValue: {}
  },
  data() {
    return {
      radio: '1',
      selectedOptions: [],
      editorParams: {
        content: '', // 富文本内容
        placeholder: '请填写内容', // 富文本占位内容
        isDisabled: false // 富文本是否禁用
      },
      formData: {
        id: undefined,
        announcementTypeCode: '',
        noticeTime: '',
        noticeContent: '',
        noticeTitle: '',
        messageId: '',
        endTime: '',
        isScreen: '1',
        showType: ''
      },
      deptProps: {
        label: 'label',
        value: 'id',
        children: 'children',
        multiple: true },
      deptData: [],
      roleOptions: [],
      userOptions: [
        { id: 0, label: '滚动' }
      ],
      rules: {
        noticeTitle: [
          { required: true, message: '公告主题不能为空', trigger: 'change' }
        ],
        announcementTypeCode: [
          { required: true, message: '公告类型不能为空', trigger: 'change' }
        ]
      },
      toolbarConfig: { },
      mode: 'default' // or 'simple'
    }
  },
  created() {
    if (!this.id) { // 没有id就是新增
      Object.keys(this.defaultValue).forEach(key => { // 给右边数据赋值
        this.formData[key] = this.defaultValue[key]
      })
    } else { // 有id就是编辑
      this.getInfo()
    }
  },
  methods: {
    getInfo() {
      getInfo(this.id).then(res => {
        Object.keys(this.formData).forEach(key => { // 给右边数据赋值
          this.formData[key] = res.data[key]
        })
        this.editorParams.content = this.formData.noticeContent
      })
    },
    isShowType() {
      if (this.formData.isScreen == '2') {
        this.formData.showType = '0'
      } else {
        this.formData.showType = ''
      }
    },

    onSubmit() {
      const wangEditorRef = this.$refs.wangEditorRef // 获取富文本节点
      if (wangEditorRef != null) {
        const noticeContent1 = wangEditorRef.getEditorHtml() // 获取富文本内容/html
        this.formData.noticeContent = noticeContent1 == '<p><br></p>' ? '' : noticeContent1
      }
      addOrUpdate({ ...this.formData, status: '0' }).then(res => {
        this.$message({
          message: res.msg,
          type: 'success'
        })
        this.$layer.close(this.layerid) // 关闭弹框
        this.$parent.getList()
        // this.$parent.refresh() // 调用父组件的刷新方法
      })
    },
    releaseNotice() {
      const wangEditorRef = this.$refs.wangEditorRef // 获取富文本节点
      if (wangEditorRef != null) {
        const noticeContent1 = wangEditorRef.getEditorHtml() // 获取富文本内容/html
        this.formData.noticeContent = noticeContent1 == '<p><br></p>' ? '' : noticeContent1
      }
      if (!this.formData.noticeContent) {
        this.$message({
          message: '公告正文不能为空',
          type: 'warning'
        })
        return
      }
      if (this.formData.noticeTime && this.formData.endTime && this.formData.endTime <= this.formData.noticeTime) {
        this.$message({
          message: '公告截止时间不能小于公告发布时间',
          type: 'warning'
        })
        return
      }
      const noticeTime = moment(new Date()).format('YYYY-MM-DD HH:mm')
      if (this.formData.endTime && this.formData.endTime <= noticeTime) {
        this.$message({
          message: '公告截止时间不能小于当前系统时间',
          type: 'warning'
        })
        return
      }
      const noticeTime1 = moment(new Date()).format('YYYY-MM-DD HH:mm')
      if (this.formData.noticeTime && this.formData.noticeTime < noticeTime1) {
        this.$message({
          message: '公告发布时间不能小于当前系统时间',
          type: 'warning'
        })
        return
      }

      this.$refs['form'].validate(valid => {
        if (valid) {
          addOrUpdate({ ...this.formData, noticeBy: this.$store.state.user.userId, status: '1' }).then(res => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.$layer.close(this.layerid) // 关闭弹框
            this.$parent.getList()
            // this.$parent.refresh() // 调用父组件的刷新方法
          })
        }
      })
    },
    cancel() {
      this.$layer.close(this.layerid)// 关闭弹框
    }
  }
}
</script>

<style lang="less" scoped>
.double{
  width: 100%;
}
.notice_main{
  /deep/ .el-textarea__inner{
    height: 500px !important;
  }

}
/deep/ .el-form--inline {
  display: block !important;
  .el-form-item {
    margin-left: 0 !important;
  }
}
.main_noticeContent {
  width: calc(100% - 40px) !important;
  .notice_main {
    line-height: 35px;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    padding-right: 20px;
  }
  .notice_main:before {
    content: "*";
    color: #ff4949;
    margin-right: 4px;
  }
  .el-form-item {
    width: 100% !important;
    display: block !important;
    /deep/ .el-form-item__content {
      width: calc(100% - 1px) !important;
      padding-left: 8px ;
      padding-top: 5px;
    }
  }
  /deep/ .el-form-item__error {
    padding-left: 10px ;
  }
  .noticeContent {
    .el-form-item__content {
      width: 100% !important;
    }
  }
}
.noticeTitle {
  width: calc(100% - 40px) !important;
  .el-form-item__content {
    width: calc(100% - 40px) !important;
  }
}
.main_main_bottom {
  display: flex;
  padding: 0px 20px;
  height: 70px;
  .main_bottom_one {
    display: flex;
    flex: 1;
    align-items: center
  }
  .main_bottom_two {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
.announceScope {
  display: flex;
  margin-left: 10px;
  margin-bottom: 20px;
  span {
    line-height: 35px;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    padding-right: 20px;
  }
}
.accessory {
  max-height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 10px;
  width: 100%;
  /deep/ .el-form-item__label {
    width: 60px !important;
  }
  .FileManageFull_container {
    align-items: flex-start !important;
  }
}
.main_main {
  padding: 20px 20px 0 20px !important;
  .main_main_title {
    display: flex;
    flex-wrap: wrap;
    .el-form-item {
      width: calc(50% - 40px);
      margin-left: 0px;
      margin-right: 40px;
    }
  }
  .main_main_center {
    padding-bottom: 22px;
    display: flex;
    .center_board {
      .el-form-item {
        margin-bottom: 0 !important;
        margin-left: 0 !important;
      }
    }
    .center_board_mode {
      padding-left: 20px;
    }
  }
}
</style>
